//城市服务商/客户经理---conent主页内容（大致一样）===>审核页面
import React,{Component} from 'react'
import { Row,Col,Form, Input,DatePicker ,Select,Table,Modal,message } from 'antd';
import Button from '../../components/button/button'
import AddUser from '../../components//AddUser/AddUser'    //添加账号
import PayRecord from '../../components/PayRecord/PayRecord'  //付费记录
import SettlementDetails from '../../components/SettlementDetails/SettlementDetails'
import Searchform from '../../components/SearchPanel/SearchPanel'
import * as tools from '../../tools/tools';
import Card from '../../components/card/card'
import $ from 'jquery'

// import './Examine.css'
import image from '../../Picture/daili_normal.png'

const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
const Option = Select.Option;


class Examine extends Component{
  constructor(props) {
    super(props);
    this.num = null;
    // this.recorddata = null;
    this.columns = [   //表格列的配置项
      { title: 'id', dataIndex: 'id', key: 'id',fixed: 'left' ,className:'iddisplay',
      sorter: (a, b) => a.number - b.number },
      { title: '代理编号', dataIndex: 'identifier', key: 'identifier'},
      { title: '代理名称', dataIndex: 'name', key: 'name',
      render: (text) => <span style={{color:'#4C8EDB',cursor:'pointer'}} onClick={this.showModal}>{text}</span> },
      { title: '代理账号', dataIndex: 'mobile', key: 'mobile' },
      { title: '代理类型', dataIndex: 'type', key: 'type' ,
      render:(text)=><span>{text ==1?'企业代理':'个人代理'}</span>},
      { title: '结算详情', dataIndex: 'province_name', key: 'province_name',
      render: () => <span style={{color:'#4C8EDB',cursor:'pointer'}} onClick={this.payrecord} >查看</span>}, 
      { title: '结算人', dataIndex: 'settlement_man', key: 'settlement_man' },
      { title: '结算时间', dataIndex: 'settlement_time', key: 'settlement_time',
      render:(text)=><span>{new Date(text * 1000).toLocaleDateString()}</span> },
      { title: '审核类型', dataIndex: 'modify_type', key: 'modify_type' ,
      render:(text)=><span>{text ==1?'代理入驻':(text == 2?'付费结算':'退定金')}</span>},
      { title: '审核状态', dataIndex: 'examine_status', key: 'examine_status' ,
      render:(text)=><span>{text ==1?'待审核':(text == 2?'成功':'失败')}</span>},
      { title: '审核人', dataIndex: 'examine_man', key: 'examine_man' },
      { title: '审核备注', dataIndex: 'examine_remark', key: 'examine_remark' ,
      render: (text) => <span style={{color:'#4C8EDB',cursor:'pointer'}} >{text}</span>},
      { title: '审核时间', dataIndex: 'examine_time', key: 'examine_time',
      render:(text)=><span>{new Date(text * 1000).toLocaleDateString()}</span> }
    ];

    this.state = {
      visible:false,
      addvisible:false,
      payvisible: false,
      modifyvisible:false,
      proxynumber:null,
      titleflag:1,
      citydata:'',
      examinetext:'',
      disabled:'disabled',
      examinevisible:false,
      examinewhether:null,
      newbutton:{
        background: '#D8D8D8',
        borderRadius: '100px',
        width:'88px',
        height:'30px',
        color:'#999999',
        marginLeft:'30px',
      },
      modaltitle:[
        {
            id:1,
            name:'账户信息'
        },
        {
            id:2,
            name:'银行信息'
        },
        {
            id:3,
            name:'签约信息'
        },
        {
            id:4,
            name:'操作日志'
        }
      ],
      searchKeys:[
        {
          id : 'identifie',
          name : '代理编号',
          type : 1,
          
        },
        {
          id : 'mobile',
          name : '代理账号',
          type : 1,
          
        },
        {
          id : 'name',
          name : '代理名称',
          type : 1,
          
        },
        {
          id : 'type',
          name : '代理类型',
          type : 2,
          options : [
            {
              val : 1,
              text : '企业代理'
                
            },{
              val : 2,
              text : '个人代理'
            }
          ]
        },
        {
          id:'examine_status',
          name:'审核状态',
          type:2,
          options : [
            {
                val : 1,
                text : '待审核'
            },{
                val : 2,
                text : '成功'
            },{
                val: 3,
                text: '失败'
            }
          ]
        },
        {
          id : 'signatory',
          name : '签约人',
          type : 1,
          
        },
        {
          id : 'settlement_man',
          name : '结算人',
          type : 1,
          
        },
        {
          id:'modify_type',
          name:'添加类型',
          type:2,
          options : [
            {
                val : 1,
                text : '代理入驻'
            },{
                val : 2,
                text : '付费结算'
            },{
                val: 3,
                text: '退定金'
            }
          ]
        },
        {
          id : 'time',
          name : '创建时间',
          type : 3,
        }
      ],
    
    };
  }
  componentWillMount(){
    tools.loginView(this).then(
    $.ajax({
      url: tools.apiUrl+this.props.location.state.url,  //?page=1
      type :'Post',
      data:{
        'token': localStorage.token,
      },
      success:(res)=>{
        if(res.status ==1){
          this.setState({
            columnsdata:res.result
          })
        // }else{
        //   message.error(res.msg)
        }
      }
    })
  )
  }

  handleSubmit = (data) => {        // from点击确认提交产生的数据---搜索
    // console.log(11)
    data.token = localStorage.token;
    if(data.time && data.time.length > 0) {
        data.start_time = new Date(data.time[0]._d.getTime()).toLocaleDateString();        //这里看上传时间结算时间还是审核时间，以及接口的属性名
        data.end_time = new Date(data.time[1]._d.getTime()).toLocaleDateString();
        data.time = '';
    }
    tools.loginView(this).then(
    $.ajax({
      url: tools.apiUrl+this.props.location.state.url,  //?page=1
      type :'Post',
      data:data,
      success:(res)=>{
        if(res.status ==1){
          this.setState({
            columnsdata:res.result
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }

  showModal=(e)=>{            //table内点击展开详情
    this.num = e.target.parentNode.parentNode.firstChild.nextSibling.innerText
    tools.loginView(this).then(
    $.ajax({
      type:'Post',
      url: tools.apiUrl+'agency/examine_settlement_info_detail',
      data:{
        token: localStorage.token,
        id: this.num
      },
      success:(res)=>{
        if(res.status ==1){
          this.setState({
            modalcontent:res.result,
            visible: true
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }

下面三个都是点击弹出modal事件
  addshowModal = () => {   //重填
    // console.log(this.state.Selectedata)
    this.setState({
      addvisible: true,
      
    });
  }

  handleCancel = () => {              //modal取消并且回传
    this.setState({visible: false});
  }
  titleclick=(obj)=>{    //点击modal样式改变
    this.setState({
        titleflag:obj
    })
  }

  tablechange=(pagination, filters, sorter)=>{            //table改变页数时的回调
    tools.loginView(this).then(
    $.ajax({
      type:'Post',
      url: tools.apiUrl+this.props.location.state.url+'?page='+pagination.current,
      data:{
        'token': localStorage.token,
      },
      success:(res)=>{
        if(res.status ==1){
          this.setState({
            columnsdata:res.result
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }       
  payrecord=(e)=>{                         //结算详情
    this.num = e.target.parentNode.parentNode.firstChild.nextSibling.innerText
    tools.loginView(this).then(
    $.ajax({
      type:'Post',
      url:  tools.apiUrl+'agency/examine_settlement_info_detail',
      data:{
        token: localStorage.token,
        id:this.num
      },
      success:(res)=>{
        if(res.status ==1){
          for(let i in res.result.allot){
            if(res.result.allot[i].type ==1 ){
              res.result.allot[i].type = '推荐奖励'
            }
          }
          this.setState({
            recorddata:res.result,
            payvisible:true
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }
  examinedata=(obj)=>{
    this.setState({
      examinevisible:true,
      examinewhether:obj
    })
  }


  rowSelection = {   //列表和选择回调
    onChange: (selectedRowKeys, selectedRows) => {   //选择一个后才能点击修改，不然不能点击
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      if(selectedRowKeys.length == 1){
        this.setState({
          newbutton:{
            border:'1px solid #4A90E2',
            borderRadius: '100px',
            width:'88px',
            height:'30px',
            color:'#4A90E2',
            marginLeft:'30px'
          },
          disabled:false,
          Selectedata:selectedRows
        })
      }else{
        this.setState({
          newbutton:{
            background: '#D8D8D8',
            borderRadius: '100px',
            width:'88px',
            height:'30px',
            color:'#999999',
            marginLeft:'30px',
          },
          disabled:'disabled'
        })
      }
    },
    type:'radio'
  }
  examinechange=(e)=>{
    this.setState({
      examinetext:e.target.value
    })
  }
  examinehandleCancel=()=>{
    this.setState({
      examinevisible:false
    })
  }

  onOk=()=>{              //备注点击提交同意或拒绝
    // console.log(this.state.Selectedata)
    // console.log(this.state.examinewhether)
    // console.log(this.state.examinetext)
    // console.log(this.props.location.state.id)
    let urldata = this.state.examinewhether == 'adopt'?tools.apiUrl+'agency/examine_settlement_handle':tools.apiUrl+'agency/settlement_record' //通过?正确:错误
    tools.loginView(this).then(
    $.ajax({
      type:'Post',
      url: urldata,
      data:{
        token: localStorage.token,
        id:this.state.Selectedata[0].id,
        pattern:this.state.examinewhether,
        examine_remark:this.state.examinetext
      },
      success:(res)=>{
        if(res.status ==1){
         
          $.ajax({
            url:  tools.apiUrl+this.props.location.state.url,  
            type :'Post',
            data:{
              'token': localStorage.token,
            },
            success:(respon)=>{
              if(respon.status ==1){
                this.setState({
                  columnsdata:respon.result,
                  examinetext:"",
                  examinevisible:false
                })
              }else{
                message.error(respon.msg)
              }
            }
          })
        }else{
          message.error(res.msg)
          this.setState({
            examinetext:"",
            examinevisible:false
          })
        }
        
      },
    })
  )
    // console.log(this.state.columnsdata)
}

addcancel=()=>{
  this.setState({
    addvisible:false
  })
}

paycancel=()=>{
  this.setState({
    payvisible:false
  })
}

  render(){
    //下面这是水波纹Button组件的style
    const newbutton={
      border:'1px solid #4A90E2',
      borderRadius: '100px',
      width:'88px',
      height:'30px',
      color:'#4A90E2',
      marginLeft:'30px'
    }
    const totlebutton={
      border: '1px solid #50E3C2',
      borderRadius:'34px',
      width:'88px',
      height:'30px',
      color:'#50E3C2',
      position:'absolute',
      right:'100px'
    }
    const searchbtn={
      background: '#4A90E2',
      borderRadius: '100px',
      width:'88px',
      height:'30px',
      color:'#fff',
      lineHeight:'30px'
    }
    const { getFieldDecorator } = this.props.form;
    const columns = [{   //测试数据
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: text => <a href="">{text}</a>,
      }, {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
      }, {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
      }, {
        title: 'Action',
        key: 'action',
        render: (text, record) => (
            <a href="">Delete</a>
        ),
    }];
    const data = [{
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        }, {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        }, {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
    }];
    // console.log(this.props.location)
   return(
      <div className="city">
        <div className="city_search">
          <Searchform 
            onSearchCb={this.handleSubmit}
            searchKeys={this.state.searchKeys} / >
        </div>
        <div className="city_biaotou">
          <Button key="btn11" datastyle={this.state.newbutton} disabled={this.state.disabled} onClick={()=>this.examinedata('adopt')}>通过</Button>    
          <Button key="btn12" datastyle={this.state.newbutton} disabled={this.state.disabled} onClick={()=>this.examinedata('refuse')}>拒绝</Button>   
          <Button key="btn13" datastyle={this.state.newbutton} disabled={this.state.disabled} onClick={this.addshowModal}>重填</Button>   
                   
          <div className="city_daochu">
            <img src={image} alt="" style={{backgroundColor:"blue"}}/>    {/*导出 */}
            
          </div>
          <Button key="btn7" datastyle={totlebutton}>表头设置</Button>                     {/*   这里几个button是控制下面table的*/}
        </div>
        <div style={{position:""}}>
            <Table columns={this.columns} dataSource={this.state.columnsdata? this.state.columnsdata.data:false} scroll={{ x: 1700 }} 
              rowSelection={this.rowSelection} onChange={this.tablechange}
              pagination={{ pageSize: 10 ,showQuickJumper:true,total:this.state.columnsdata  ? this.state.columnsdata.last_page*10 :false}}>
            </Table>
            <div className="city_datanumber">
              <span >已为您匹配相关结果，共 {this.state.columnsdata ?this.state.columnsdata.total:false} 条记录</span>
            </div>
        </div>
        <div> 
               {/* 这里是页面内打开的模态框 */}

          <Modal title="审核" className="modal_box"
                visible={this.state.visible}
                maskClosable={false}
                footer={null}
                onCancel={this.handleCancel}
                bodyStyle={{height:'700px',overflow: 'auto'}}
                >
              
                <div className="modal_btnbox">
                    <ul>
                        {this.state.modaltitle.map((item,index)=>{      {/* 城市服务商modal的title样式*/}
                              return(
                                  <li key={item.id} className={this.state.titleflag === index+1?"titleclick":""} 
                                      onClick={()=>this.titleclick(item.id)}>      
                                          {item.name}
                                  </li>
                              )
                          })}
                    </ul>
                </div>
                <div style={{marginTop:"30px"}}>
                    <Card head="账" item="1" modaldata={this.state.modalcontent ? this.state.modalcontent:false} ></Card>           
                    <Card head="银" item="2" modaldata={this.state.modalcontent ? this.state.modalcontent:false} ></Card>
                    <Card head="签" item="3" oldpayson={true}  modaldata={this.state.modalcontent ? this.state.modalcontent:false} ></Card>

                    {/* <div className="card_box">
                        <div className="card_box_head">
                            日
                        </div>
                        <div className="card_box_content">
                            <div className="card_content_triangle"></div>
                            <div>
                                <Table columns={columns} dataSource={data} pagination={false}>
                                </Table>
                            </div>
                        </div>
                    </div> */}
                </div>
            </Modal>
          <AddUser  show={this.state.addvisible} onCancel={this.addcancel}  type={this.state.Selectedata?this.state.Selectedata[0].type:false}></AddUser>     {/*  这里由审核的程度决定重填项里哪些需要重填。并且url需要判断（与之前的）*/}
          <SettlementDetails show={this.state.payvisible} onCancel={this.paycancel} modaldata={this.state.recorddata} type="1"></SettlementDetails> {/*  付费记录*/}
          <Modal 
            title="备注"
            maskClosable={false}
            onCancel={this.examinehandleCancel}
            onOk={this.onOk}
            visible={this.state.examinevisible}
          >
            <textarea cols='75' rows="5" placeholder="请输入备注，最多250字"  maxLength="250" style={{resize:'none'}} onChange={this.examinechange} value={this.state.examinetext}></textarea>
          </Modal>
        </div>
      </div>
    )
  }
  
}
const WrappedExamine  = Form.create()(Examine);


export default WrappedExamine



